<template>
  <div class="setting-container">
    <el-row class="mt20">
      <div style="margin-left: auto;">
        <el-button type="primary" @click="handleAdd">新增岗位</el-button>
      </div>
    </el-row>
    <el-table :data="list" class="mt10">
      <el-table-column prop="name" label="岗位"></el-table-column>
      <el-table-column prop="orderNum" label="岗位员工数"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
          <el-button type="primary" link @click="handleRemove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <PostOperationDl
      :visible="postOperation.visible"
      :type="postOperation.type"
      :title="postOperation.title"
      :form="postOperation.form"
      @ok="handlePostOk"
      @cancel="handlePostCancel"
    />
  </div>
</template>
<script setup name="Post">
import postApi from '@/api/room/post'
import PostOperationDl from './postOperationDl.vue'


const { proxy } = getCurrentInstance()

const loading = ref(false)
const total = ref(0)
const list = ref([{
  name: '管理员',
  orderNum: 1
}])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  postOperation: {
    visible: false,
    type: 'add',
    title: '新增岗位',
    form: {}
  }
})
const { queryParams, postOperation } = toRefs(data)

/* 新增岗位 */
function handleAdd() {
  postOperation.value.type = 'add'
  postOperation.value.title = '新增岗位'
  postOperation.value.form = {}
  postOperation.value.visible = true
}
/* 编辑岗位 */
function handleEdit(row) {
  postOperation.value.type = 'edit'
  postOperation.value.title = '编辑岗位'
  postOperation.value.form = { ...row }
  postOperation.value.visible = true
}
/* 删除岗位 */
function handleRemove(row) {
  proxy.$modal.confirm('确定删除岗位？').then(() => {
    postApi.remove(row.postId).then(res => {
      proxy.$modal.msgSuccess('岗位删除成功')
    })
  }).catch(() => {
    console.log('cancel')
  })
}

/* 岗位操作弹窗 */
function handlePostOk(type, params) {
  if (type === 'add') {
    postApi.save(params).then(res => {
      proxy.$modal.msgSuccess('新增成功')
      postOperation.value.visible = false
    })
  } else if (type === 'edit') {
    postApi.edit(params).then(res => {
      proxy.$modal.msgSuccess('修改成功')
      postOperation.value.visible = false
    })
  }
}
function handlePostCancel() {
  postOperation.value.visible = false
}

/* 获取岗位列表 */
function getList() {
  loading.value = true
  postApi.getList(queryParams.value).then(res => {
    list.value = res.rows
    total.value = res.total
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}



getList()
</script>